<template>
    <view class="box">
        <view class="pofiexd">
            <view class="tab">
                <view @click="clicktabbars(index)" :key="index" :class="{viewitem: activeviewitem === index}"
                    v-for="(item, index) in tabbars">
                    <image class="img" :src="active === index ? item.activeimg : item.img"></image>
                    <br>
                    {{item.name}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            tabbars: {
                type: Array,
                default: [{
                    name: '首页',
                    img: '../static/img/navimg/Tab-icon-01@3x.png',
                    activeimg: '../static/img/navimg/Tab-icon-Active-01@3x.png'
                },
                {
                    name: "服务点",
                    img: "../static/img/navimg/service_active.png",
                    activeimg: "../static/img/navimg/service.png"
                },
                {
                    name: '订单',
                    img: '../static/img/navimg/Tab-icon-02@3x.png',
                    activeimg: '../static/img/navimg/Tab-icon-Active-02@3x.png'
                }, {
                    name: '我的',
                    img: '../static/img/navimg/Tab-icon-04@3x.png',
                    activeimg: '../static/img/navimg/Tab-icon-Active-04@3x.png'
                }]
            }
        },
        data() {
            return { 
                active: this.$store.state.active,
                activeviewitem: this.$store.state.active
            };
        },
        methods: {
            clicktabbars(index) {
                this.activeviewitem = index
                this.$store.commit('changeactive', index)
                this.active = this.$store.state.active
                this.$emit('clicktabindex', index)
            }
        }
    }
</script>

<style lang="scss" scoped>    
    .pofiexd {
        position: fixed;
        // height: 98rpx;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #EEEEEE;
        // padding-top: 20rpx;
        // padding-bottom: 100rpx;
        min-height: 100rpx;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        background-color: #fff;
        z-index: 114514;
        font-size: 20rpx;
    }

    .tab {
        padding: 10rpx 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        
        view {
            width: 33.3%;
        }
    }

    .viewitem {
        color: #1bc078;
    }

    image {
        width: 60rpx;
        height: 60rpx;
    }
</style>
